<template>
    <div>
      <div>
        <div class="num">1/2</div>
        <div class="title">订单详情</div>
      </div>
      <div class="box">
        <div class="box_content">
          订单编号：ZZEDU1234567890
        </div>
        <div class="box_content">
          创建日期：2020-10-10 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          姓名：智助教育
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          联系方式：18888888888 / 16666666666（父亲）
        </div>
      </div>
      <hr/>
      <div class="box">
        <div class="box_content">
          在读学期：2020年冬季
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          在校年级：八年级
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          在读课程：国际朗文课程
        </div>
        <div class="box_content">
          上课教室：1栋2009室
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          所属校区：智助教育培训中心：珠海校区
        </div>
        <div class="box_content">
          校区电话：0756-88888888
        </div>
      </div>
      <hr/>
      <div class="box">
        <div class="box_content">
          购买内容：2020年冬季 国际朗文课程
        </div>
        <div class="box_content" style="color: red;font-weight: bold;">
          金额：1000
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          开课时间：2020-10-10 上课时间：一、二、三、四、 五、六
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          课程名称：2020年冬季 国际朗文课程 教材
        </div>
        <div class="box_content" style="color: red;font-weight: bold;">
          金额：100
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          购买数量：1 套
        </div>
      </div>
      <div class="box">
        <div class="box_content" style="color: red;font-weight: bold;">
          合计金额：1100
        </div>
      </div>
      <div>
        <div class="num">2/2</div>
        <div class="title">订单详情</div>
      </div>
      <div class="box">
        <div class="box_content">
          订单编号：ZZEDU1234567890
        </div>
        <div class="box_content">
          收款日期：2020-10-10 10:10:10
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          缴费类型：订金/学费
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          缴费方式：现金/刷卡/微信/支付宝
        </div>
        <div class="box_content">
          交易编号：现金/刷卡/微信/支付宝
        </div>
      </div>
      <div class="box">
        <div class="box_content" style="color: red;font-weight: bold;">
          缴费金额：200
        </div>
        <div class="box_content" style="color: red;font-weight: bold;">
          未缴费用：900
        </div>
      </div>
      <div class="box">
        <div class="box_content" style="color: red;font-weight: bold;">
          收款人：曾晓蓉
        </div>
      </div>
      <hr/>
      <div class="box">
        <div class="box_content">
          订单编号：ZZEDU1234567890-1
        </div>
        <div class="box_content">
          收款日期：2020-10-13 13:13:10
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          缴费类型：订金/学费
        </div>
      </div>
      <div class="box">
        <div class="box_content">
          缴费方式：现金/刷卡/微信/支付宝
        </div>
        <div class="box_content">
          交易编号：现金/刷卡/微信/支付宝
        </div>
      </div>
      <div class="box">
        <div class="box_content"  style="color: red;font-weight: bold;">
          缴费金额：500
        </div>
        <div class="box_content"  style="color: red;font-weight: bold;">
          未缴费用：500
        </div>
      </div>
      <div class="box">
        <div class="box_content" style="color: red;font-weight: bold;">
          收款人：王小蒙
        </div>
      </div>
      <div style="text-align: center">
        <el-button>打印</el-button>
        <el-button type="primary" @click="Pay">缴费</el-button>
      </div>
      <el-dialog title="新增学员缴费录入" :visible.sync="dialogVisible" width="40%" append-to-body>
        <div style="font-size: 20px">
          <el-form>
            <div class="box">
              <div class="box_content2">
                缴费类型：<el-select placeholder="">
                <el-option label="微信"></el-option>
                <el-option label="支付宝"></el-option>
              </el-select>
              </div>
              <div class="box_content2">
                日期：<el-date-picker type="date" placeholder=""></el-date-picker>
              </div>
            </div>
            <div class="box">
              <div class="box_content2">
                缴费方式：<el-select placeholder="">
                  <el-option label="微信"></el-option>
                  <el-option label="支付宝"></el-option>
                </el-select>
              </div>
              <div class="box_content2">
                <el-input style="margin-left: 10px"></el-input>
              </div>
            </div>
            <div class="box">
              <div class="box_content2">
                缴费金额：<el-select placeholder="">
                <el-option label="微信"></el-option>
                <el-option label="支付宝"></el-option>
              </el-select>
              </div>
              <div class="box_content2">
                收款人：<el-date-picker type="date" placeholder=""></el-date-picker>
              </div>
            </div>
            <div style="text-align: center">
              <el-button>打印</el-button>
              <el-button type="primary">缴费</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'Pay',
        data(){
          return{
            dialogVisible: false
          }
        },methods: {
          Pay(){
            this.dialogVisible = true
          }
        }
    }
</script>

<style scoped>
  .num{
    margin-bottom: 10px;
    width: 30px;
    height: 20px;
    float: left;
  }
  .title{
    margin-bottom: 10px;
    width: 100px;
    height: 20px;
    float: left;
  }
  .box{
    font-size: 15px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    /*//两侧对齐*/
    justify-content:space-between;
    /*//自动换行*/
    flex-wrap: wrap;
    /*//清除上下行的中间空隙*/
    align-content: flex-start;
  }
  .box_content{
    flex: 30 0 400px;
  }
  .box_content2{
    flex: 30 0 250px;
    text-align: right;
  }
  /*//解决最后一行的问题*/
  .box:after{
    content: '';
    width: 30%;
  }
</style>
